{extend name="$adminPage"}

{block name="headStyle"}
<style type="text/css">
    .label {
        height: 30px;
        line-height: 30px;
        text-align: right;
    }
</style>
{/block}

{block name="content"}
<div class="layui-row layui-col-space15">
    <div class="layui-col-xs2 layui-col-md2 label">姓名</div>
    <div class="layui-col-xs2 layui-col-md4">
        <input type="text" name="name" value="小王" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-col-xs2 layui-col-md2 label">规则</div>
    <div class="layui-col-xs2 layui-col-md4">
        <input type="text" name="nameRule" value="require" autocomplete="off" class="layui-input">
    </div>
</div>
<br>
<div class="layui-row layui-col-space15">
    <div class="layui-col-xs2 layui-col-md2 label">年龄</div>
    <div class="layui-col-xs2 layui-col-md4">
        <input type="number" name="age" value="18" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-col-xs2 layui-col-md2 label">规则</div>
    <div class="layui-col-xs2 layui-col-md4">
        <input type="text" name="ageRule" value="require" autocomplete="off" class="layui-input">
    </div>
</div>
<br>
<div class="layui-row layui-col-space15">
    <div class="layui-col-xs12 layui-col-md12 layui-col-xs-offset2 layui-col-md-offset2">
        <button class="layui-btn layui-btn-xs btn-submit">提交</button>
    </div>
</div>
{/block}

{block name="script"}
<script type="text/javascript">
    layui.use(["jquery", "validate", "yunj"], function () {
        let doc = document;
        let $ = layui.jquery;
        let validate = layui.validate;

        $(doc).ready(function () {
            $(".btn-submit").click(function () {
                let name = $("input[name=name]").val();
                let nameRule = $("input[name=nameRule]").val();
                let age = $("input[name=age]").val();
                let ageRule = $("input[name=ageRule]").val();

                let data = {
                    name: name,
                    age: age
                };

                let rule = {
                    name: nameRule,
                    age: ageRule
                };

                let dataTitle = {
                    name: "姓名",
                    age: "年龄"
                };

                let res = validate.rule(rule).check(data, dataTitle);
                if (res)
                    yunj.msg("验证通过");
                else
                    yunj.msg(validate.getError());
            });
        });
    });
</script>
{/block}